<template>
  <div class="app">
    <!-- <hello-world msg="Hello Vue 3 + TypeScript + Vite" /> -->
    <!-- <video-full></video-full> -->
    <!-- <flex-box class="flexBox"></flex-box> -->
    <!-- <menu-high-light class="menu"></menu-high-light> -->

    <!-- <css-animation-prc class="cssAnimation"></css-animation-prc> -->
    <vue-prc class="vue" id="custom-layout" @click="changeValue"></vue-prc>
    <!-- <vue-animation-prc></vue-animation-prc> -->
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
import VideoFull from './components/VideoFull.vue';
import FlexBox from './components/FlexBox.vue';
import MenuHighLight from './components/MenuHighLight.vue';
import CssAnimationPrc from './components/CssAnimationPrc.vue';
import VuePrc from './components/VuePrc.vue';
import VueAnimationPrc from './components/VueAnimationPrc.vue';


// import wuwei from './libs/wuwei';
// /* 无为数据 */
// provide('wuwei', wuwei);
@Options({ components: {
  HelloWorld,
  VideoFull,
  FlexBox,
  MenuHighLight,
  CssAnimationPrc,
  VuePrc,
  VueAnimationPrc,
} })
export default class App extends Vue {
  public changeValue() {

  }
  public mounted() {
    // console.log(this.$el);
  }
}
</script>

<style lang="postcss" scoped>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  color: #2c3e50;
  margin-top:0;
  &, :deep(button) {
    font-size: 20px;
  }
  .cssAnimation{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: grey;
  }
  .menu{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: grey;
  }
  .css3d{

  }
  .flexBox{

  }
}
:deep(.directive-btn) {
  transition:transform .4s ease;
}
</style>
